<template>
	<view class="pb-150">
		<image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }"
			mode="aspectFill">
		</image>
		<u-navbar title="检测任务管理" :autoBack="true" leftIconColor="#fff" bgColor="transparent"
			:titleStyle="{ color: '#fff' }" safeAreaInsetTop placeholder></u-navbar>

		<!-- 搜索和筛选区域 -->
		<view class="search-filter-box">
			<!-- 全局搜索 -->
			<!-- <view class="search-row">
				<u-search v-model="searchKeyword" placeholder="请输入关键词搜索" @search="handleSearch"></u-search>
			</view> -->

			<!-- 筛选条件 -->
			<view class="filter-row">
				<view class="filter-item">
					<text class="filter-label">监测年份</text>
					<view class="date-inputs">
						<view class="date-input-wrapper" @click="showStartYearPicker = true">
							<u--input v-model="filter.startYear" placeholder="开始年份" readonly></u--input>
							<u-icon name="calendar" size="24" color="#999" class="calendar-icon" />
						</view>
						<text class="date-separator">至</text>
						<view class="date-input-wrapper" @click="showEndYearPicker = true">
							<u--input v-model="filter.endYear" placeholder="结束年份" readonly></u--input>
							<u-icon name="calendar" size="24" color="#999" class="calendar-icon" />
						</view>
					</view>
				</view>
				<!-- <view class="filter-item">
					<text class="filter-label">监测类别</text>
					<view class="picker-input" @click="showCategoryPicker = true">
						<text>{{ filter.category || '全部' }}</text>
						<u-icon name="arrow-down" size="24" color="#999" />
					</view>
				</view> -->
				<!-- <view class="filter-item">
					<text class="filter-label">状态</text>
					<view class="picker-input" @click="showStatusPicker = true">
						<text>{{ filter.status || '全部' }}</text>
						<u-icon name="arrow-down" size="24" color="#999" />
					</view>
				</view> -->
			</view>
			<!-- 操作按钮 -->
			<view class="action-buttons">
				<u-button type="primary" size="small" @click="handleSearch">查询</u-button>
				<u-button size="small" @click="handleReset">重置</u-button>
			</view>
		</view>

		<!-- 任务列表 -->
		<view class="task-list">
			<view class="task-card" @click="goUrl(item)" v-for="(item, index) in filteredList" :key="index">
				<view class="task-header">
					<view class="task-info">
						<view class="year-level">
							<text class="year">{{ item.year }}</text>
							<text class="level">{{ item.level }}</text>
						</view>
						<view :class="['status-tag', `status-${item.statusValue}`]">
							{{ item.statusText }}
						</view>
					</view>
				</view>

				<view class="task-content">
					<view class="info-row">
						<text class="label">监测类别:</text>
						<text class="value">{{ item.category }}</text>
					</view>
					<view class="info-row">
						<text class="label">{{ item.statusValue === 'draft' ? '录入人员' : '发起人' }}:</text>
						<text class="value">{{ item.people }}</text>
					</view>
					<view class="info-row">
						<text class="label">{{ item.statusValue === 'draft' ? '录入部门' : '发起人部门' }}:</text>
						<text class="value">{{ item.department }}</text>
					</view>
					<view class="info-row">
						<text class="label">开始时间:</text>
						<text class="value">{{ item.startTime }}</text>
					</view>
					<view class="info-row">
						<text class="label">结束时间:</text>
						<text class="value">{{ item.endTime }}</text>
					</view>

					<!-- 分配明细 -->
					<!-- <view class="allocation-section" v-if="item.allocation && item.allocation.length > 0">
						<text class="label">分配明细:</text>
						<view class="allocation-list">
							<view class="allocation-item" v-for="(a, ai) in item.allocation" :key="ai">
								<text
									class="value">{{ a['地区'] }}：合计{{ a['合计'] || 0 }}，板栗{{ a['板栗'] || 0 }}，核桃{{ a['核桃'] || 0 }}，枣{{ a['枣（不含条数）'] || 0 }}，花椒{{ a['花椒'] || 0 }}</text>
							</view>
						</view>
					</view> -->
				</view>
				<!-- <view class="task-actions">
					<u-button size="normal" type="primary" plain @click="handleProcessForm(item)">流程表单</u-button>
					<u-button size="normal" type="info" plain @click="handleProcessProgress(item)">流程进度</u-button>
					<u-button size="normal" type="warning" plain @click="handleWithdraw(item)">撤回</u-button>
					<u-button v-if="item.statusValue === 'draft'" size="normal" type="success" plain
						@click="handleEdit(item)">编辑</u-button>
				</view> -->
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-if="filteredList.length === 0">
			<u-empty mode="data" icon="data"></u-empty>
		</view>

		<!-- 检测任务下发按钮：跳转到独立下发页面 -->
		<view @tap="openSubmitPage" class="submit-btn">
			检测任务下发
		</view>

		<!-- 检测任务下发弹窗 -->
		<u-popup :show="showSubmitModal" mode="center" @close="showSubmitModal = false" :round="22"
			:customStyle="{ width: '670rpx' }">
			<view class="submit-modal">
				<view class="modal-header">
					<text class="modal-title">产品检测任务下发</text>
					<u-icon name="close" size="32" color="#999" @click="showSubmitModal = false"></u-icon>
				</view>

				<view class="modal-content">
					<view class="form-item">
						<text class="form-label">监测年份</text>
						<view class="form-input" @click="showYearPicker = true">
							<text>{{ submitForm.year || '选择年份' }}</text>
							<u-icon name="calendar" size="24" color="#999" />
						</view>
					</view>

					<view class="form-item">
						<text class="form-label">监测类别</text>
						<view class="form-input" @click="showSubmitCategoryPicker = true">
							<text>{{ submitForm.category || '选择监测类别' }}</text>
							<u-icon name="arrow-down" size="24" color="#999" />
						</view>
					</view>

					<view class="form-item">
						<text class="form-label">任务级别</text>
						<!-- 当 isLevelReadonly 为 true 时，禁止点击并显示只读提示 -->
						<view :class="['form-input', isLevelReadonly ? 'readonly' : '']"
							@click="!isLevelReadonly && (showLevelPicker = true)">
							<text>{{ submitForm.level || '选择任务级别' }}</text>
							<u-icon v-if="!isLevelReadonly" name="arrow-down" size="24" color="#999" />
							<u-icon v-else name="lock" size="20" color="#999" />
						</view>
					</view>

					<!-- <view class="template-download">
						<text class="download-text">模板文件下载: </text>
						<text class="download-link">承办机构及承检任务.docx</text>
					</view> -->

					<view class="form-item">
						<text class="form-label">判定标准上传</text>
						<view class="upload-section">
							<u-button type="primary" size="small" @click="handleUpload">点击上传</u-button>
							<text class="upload-note">注:支持.xlsx、xls、docx文件</text>

							<!-- 已上传文件列表 -->
							<view v-if="uploadedFiles.length > 0" class="file-list">
								<view v-for="(file, index) in uploadedFiles" :key="index" class="file-item">
									<view class="file-info">
										<u-icon name="file-text" size="32" color="#007AFF"></u-icon>
										<text class="file-name">{{ file.name }}</text>
										<text class="file-size">{{ formatSize(file.size) }}</text>
									</view>
									<view class="file-status">
										<text v-if="file.status === 'success'" class="status-success">{{
											getStatusText(file.status) }}</text>
										<text v-else-if="file.status === 'progress'" class="status-progress">{{
											getStatusText(file.status) }} {{ file.progress }}%</text>
										<text v-else-if="file.status === 'fail'" class="status-fail">{{
											getStatusText(file.status) }}</text>
										<text v-else class="status-pending">{{ getStatusText(file.status) }}</text>
									</view>
									<u-icon name="close" size="24" color="#999" @click="removeFile(index)"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="modal-actions">
					<u-button type="primary" @click="handleConfirmSubmit">确认</u-button>
					<!-- <u-button type="info" @click="handleSaveDraft">存草稿</u-button> -->
					<u-button @click="handleReset">重置</u-button>
				</view>
			</view>
		</u-popup>

		<!-- lsj-upload 插件 -->
		<lsj-upload ref="lsjUploadRef"></lsj-upload>

		<!-- 年份选择器 -->
		<u-picker :show="showYearPicker" :columns="[yearOptions]"
			:defaultIndex="[yearOptions.indexOf(new Date().getFullYear().toString())]" @confirm="onYearConfirm"
			@cancel="showYearPicker = false" @close="showYearPicker = false" />

		<!-- 弹窗监测类别选择器 -->
		<u-picker :show="showSubmitCategoryPicker" :columns="[categoryOptions]" @confirm="onSubmitCategoryConfirm"
			@cancel="showSubmitCategoryPicker = false" @close="showSubmitCategoryPicker = false" />

		<!-- 任务级别选择器 -->
		<u-picker :show="showLevelPicker" :columns="[levelOptions]" @confirm="onLevelConfirm"
			@cancel="showLevelPicker = false" @close="showLevelPicker = false" />

		<!-- 选择器 -->
		<u-picker :show="showStartYearPicker" :columns="[yearOptions]"
			:defaultIndex="[yearOptions.indexOf(new Date().getFullYear().toString())]" @confirm="onStartYearConfirm"
			@cancel="showStartYearPicker = false" @close="showStartYearPicker = false" />
		<u-picker :show="showEndYearPicker" :columns="[yearOptions]"
			:defaultIndex="[yearOptions.indexOf(new Date().getFullYear().toString())]" @confirm="onEndYearConfirm"
			@cancel="showEndYearPicker = false" @close="showEndYearPicker = false" />
		<u-picker :show="showCategoryPicker" :columns="[categoryOptions]" @confirm="onCategoryConfirm"
			@cancel="showCategoryPicker = false" @close="showCategoryPicker = false" />
		<u-picker :show="showStatusPicker" :columns="[statusOptions]" @confirm="onStatusConfirm"
			@cancel="showStatusPicker = false" @close="showStatusPicker = false" />

		<u-safe-bottom></u-safe-bottom>
	</view>
</template>

<script>
import navbarMixin from '@/common/navbarMixin'
import config from '@/config.js'
import request from '@/utils/request'
import {
	jiancelist
} from '@/api/sylin/index.js'
export default {
	mixins: [navbarMixin],
	data() {
		return {
			searchKeyword: '',
			showStartYearPicker: false,
			showEndYearPicker: false,
			showCategoryPicker: false,
			showStatusPicker: false,
			showSubmitModal: false,
			showYearPicker: false,
			showSubmitCategoryPicker: false,
			showLevelPicker: false,
			filter: {
				startYear: '',
				endYear: '',
				category: '',
				status: ''
			},
			yearOptions: (() => {
				const currentYear = new Date().getFullYear()
				const years = []
				for (let i = currentYear + 20; i >= currentYear - 20; i--) {
					years.push(i.toString())
				}
				return years
			})(),
			categoryOptions: ['全部', '监督抽检', '评价性抽检', '风险监测'],
			// 字典相关，用于 loadDetectionDict
			detectionTypeMap: {},
			detectionTypeDictType: 'product_monitor_type',
			levelOptions: ['全部', '省级', '市级', '区县级'],
			// 级别字典映射，key 使用 dictSort（数字或字符串）
			levelMap: {},
			// 状态下拉按照后端状态码要求展示，顺序为：全部, 草稿, 进行中, 已完成
			statusOptions: ['全部', '草稿', '进行中', '已完成'],
			submitForm: {
				year: '',
				category: '',
				level: '省级'
			},
			// 从本地读取的用户类型：1=省级,2=市级,3=区县
			userType: '1',
			// 是否禁止修改任务级别（true => 只读）
			isLevelReadonly: false,
			uploadedFiles: [], // 上传的文件列表
			list: []
		}
	},
	onShow(){
		this.getjiancelist()
	},
	onLoad(options) {
		this.getjiancelist()
		this.loadDetectionDict()
		this.loadLevelDict()

		// 从本地存储读取 userType，决定任务级别是否可选
		try {
			let ut = ''
			// 兼容 uni 和浏览器 localStorage
			if (typeof uni !== 'undefined' && uni.getStorageSync) {
				ut = uni.getStorageSync('userType')
			} else if (typeof localStorage !== 'undefined') {
				ut = localStorage.getItem('userType')
			}
			if (!ut) ut = '1'
			this.userType = String(ut)
			// 设置 submitForm.level 并将是否可选标记
			switch (String(this.userType)) {
				case '1':
					this.submitForm.level = '省级'
					this.isLevelReadonly = true
					break
				case '2':
					this.submitForm.level = '市级'
					this.isLevelReadonly = true
					break
				case '3':
					this.submitForm.level = '区县级'
					this.isLevelReadonly = true
					break
				default:
					this.isLevelReadonly = false
			}
		} catch (e) {
			console.warn('read userType error', e)
		}
	},
	computed: {
		filteredList() {
			return this.list.filter(item => {
				// 关键词搜索
				if (this.searchKeyword && this.searchKeyword.trim()) {
					const keyword = this.searchKeyword.toLowerCase()
					const searchText = `${item.category}${item.people}${item.department}`.toLowerCase()
					if (!searchText.includes(keyword)) return false
				}

				// 年份筛选
				if (this.filter.startYear && item.year < this.filter.startYear) return false
				if (this.filter.endYear && item.year > this.filter.endYear) return false

				// 类别筛选
				if (this.filter.category && this.filter.category !== '全部' && item.category !== this.filter.category)
					return false

				// 状态筛选：按用户规则 1->草稿, 2->进行中, 3->已完成
				if (this.filter.status && this.filter.status !== '全部') {
					const statusMap = {
						'草稿': 'draft',
						'进行中': 'processing',
						'已完成': 'completed'
					}
					if (item.statusValue !== statusMap[this.filter.status]) return false
				}

				return true
			})
		}
	},
	methods: {
		goUrl(item) {
			console.log(item);
			uni.navigateTo({
				url: `/pages/workbench/01task/chouyangdan?year=${item.year}&detectionType=${item.detectionType}`
			})
		},
		async loadLevelDict() {
			try {
				const res = await request({
					url: '/system/dict/data/type/syl_product_monitor_standard_level',
					method: 'get'
				})
				const rows = Array.isArray(res) ? res : (Array.isArray(res && res.data) ? res.data : [])
				const map = {}
				const options = ['全部']
				rows.forEach(d => {
					const label = d.dictLabel ?? d.label ?? d.name
					const sort = d.dictSort ?? d.sort ?? d.dictCode
					if (sort != null) {
						map[String(sort)] = label || sort
						options.push(label || sort)
					}
				})
				this.levelMap = map
				this.levelOptions = options
				console.log('loadLevelDict rows:', rows)
			} catch (err) {
				console.error('loadLevelDict error', err)
				this.levelMap = {}
			}
		},
		async loadDetectionDict() {
			try {
				const res = await request({
					url: `/system/dict/data/type/${this.detectionTypeDictType}`,
					method: 'get'
				})
				// 支持 res 为数组或 { data: [] } 的后端返回格式
				const rows = Array.isArray(res) ? res : (Array.isArray(res && res.data) ? res.data : [])
				const map = {}
				const options = ['全部']
				rows.forEach(d => {
					const label = d.dictLabel ?? d.label ?? d.name
					const value = d.dictValue ?? d.value ?? d.code
					if (value != null) {
						map[value] = label || value
						options.push(label || value)
					}
				})
				this.detectionTypeMap = map
				// 更新页面picker选项
				this.categoryOptions = options
				console.log('loadDetectionDict rows:', rows)
			} catch (err) {
				console.error('loadDetectionDict error', err)
				this.detectionTypeMap = {}
			}
		},
		async getjiancelist() {
			try {
				// 构建请求参数，包含分页和可选的年份筛选
				const params = {
					pageNum: 1,
					pageSize: 99999
				}
				if (this.filter.startYear) params.startYear = this.filter.startYear
				if (this.filter.endYear) params.endYear = this.filter.endYear

				const res = await jiancelist(params)
				console.log('jiancelist res:', res)
				if (res && res.rows && Array.isArray(res.rows)) {
					// map API rows to this.list structure used by the template
					this.list = res.rows.map(r => {
						let allocation = []
						if (r.allocationInfo) {
							try {
								if (typeof r.allocationInfo === 'string') {
									allocation = JSON.parse(r.allocationInfo)
								} else if (Array.isArray(r.allocationInfo)) {
									allocation = r.allocationInfo
								}
							} catch (e) {
								console.warn('allocationInfo parse error', e)
								allocation = []
							}
						}
						return {
							id: r.id,
							year: (r.year && r.year !== '') ? r.year : (r.createTime ? r.createTime.split(' ')[0] : ''),
							level: (r.detectionLevel && this.levelMap[String(r.detectionLevel)]) ? this.levelMap[String(r.detectionLevel)] : (r.detectionLevel === '1' ? '省级' : (r.detectionLevel === '2' ? '市级' : '区县级')),
							statusValue: (String(r.status) === '1') ? 'draft' : ((String(r.status) === '2') ? 'processing' : ((String(r.status) === '3') ? 'completed' : 'draft')),
							statusText: (String(r.status) === '1') ? '草稿' : ((String(r.status) === '2') ? '进行中' : ((String(r.status) === '3') ? '已完成' : '草稿')),
							category: (r.detectionType && this.detectionTypeMap[r.detectionType]) ? this.detectionTypeMap[r.detectionType] : (r.detectionType || ''),
							// 保留原始 detectionType 值与名称，供外部使用
							detectionType: r.detectionType || '',
							detectionTypeName: (r.detectionType && this.detectionTypeMap[r.detectionType]) ? this.detectionTypeMap[r.detectionType] : (r.detectionType || ''),
							people: r.person || '',
							department: r.department || '',
							startTime: r.startTime || '',
							endTime: r.endTime || '',
							allocation: allocation || []
						}
					})
				} else {
					console.warn('jiancelist rows missing or invalid', res)
				}
			} catch (err) {
				console.error('getjiancelist error', err)
			}
		},
		handleSearch() {
			// 触发重新请求列表，后端使用 startYear/endYear 进行筛选
			this.getjiancelist()
		},
		handleReset() {
			this.searchKeyword = ''
			this.filter = {
				startYear: '',
				endYear: '',
				category: '',
				status: ''
			}
		},
		onStartYearConfirm(e) {
			this.filter.startYear = e.value[0]
			this.showStartYearPicker = false
		},
		onEndYearConfirm(e) {
			this.filter.endYear = e.value[0]
			this.showEndYearPicker = false
		},
		onCategoryConfirm(e) {
			this.filter.category = e.value[0]
			this.showCategoryPicker = false
		},
		onStatusConfirm(e) {
			this.filter.status = e.value[0]
			this.showStatusPicker = false
		},
		handleProcessForm(item) {
			uni.showToast({
				title: `查看流程表单: ${item.id}`,
				icon: 'none'
			})
		},
		handleProcessProgress(item) {
			uni.showToast({
				title: `查看流程进度: ${item.id}`,
				icon: 'none'
			})
		},
		handleWithdraw(item) {
			uni.showModal({
				title: '确认撤回',
				content: '确定要撤回这个任务吗？',
				success: (res) => {
					if (res.confirm) {
						uni.showToast({
							title: '撤回成功',
							icon: 'success'
						})
					}
				}
			})
		},
		handleEdit(item) {
			uni.showToast({
				title: `编辑任务: ${item.id}`,
				icon: 'none'
			})
		},
		onYearConfirm(e) {
			this.submitForm.year = e.value[0]
			this.showYearPicker = false
		},
		onSubmitCategoryConfirm(e) {
			this.submitForm.category = e.value[0]
			this.showSubmitCategoryPicker = false
		},
		onLevelConfirm(e) {
			if (!this.isLevelReadonly) {
				this.submitForm.level = e.value[0]
			}
			this.showLevelPicker = false
		},
		openSubmitPage() {
			uni.navigateTo({ url: `/pages/workbench/01task/monitor-submit?edit=1` })
		},
		handleUpload() {
			this.$refs.lsjUploadRef.chooseFile({
				count: 5, // 最多选择5个文件
				size: 10, // 单个文件最大10MB
				multiple: true, // 允许多选
				formats: 'xlsx,xls,docx', // 只允许选择指定格式
				success: (files) => {
					console.log('选择的文件:', files)
					// 将新选择的文件添加到现有文件列表
					this.uploadedFiles = [...this.uploadedFiles, ...files]
					// 自动上传文件
					this.autoUploadFiles(files)
				},
				fail: (error) => {
					console.error('选择文件失败:', error)
					uni.showToast({
						title: '选择文件失败',
						icon: 'none'
					})
				}
			})
		},

		// 自动上传文件
		autoUploadFiles(newFiles) {
			newFiles.forEach(file => {
				this.uploadFile(file)
			})
		},
		uploadFile(file) {
			// 文件上传接口
			const uploadUrl = `${config.baseUrl}/forest/monitorTask/importData`

			this.$refs.lsjUploadRef.upload({
				file: file,
				url: uploadUrl,
				name: 'file',
				method: 'post',
				header: {
					Authorization: 'Bearer ' + uni.getStorageSync('App-Token')
				},
				formData: {
					// 额外的表单数据
				},
				onprogress: (e) => {
					file.status = 'progress'
					file.progress = e.progress || 0
					console.log('上传进度:', e)
				},
				success: (e) => {
					file.status = 'success'
					file.responseText = e.data
					console.log('上传成功:', e)
					uni.showToast({
						title: '文件上传成功',
						icon: 'success'
					})
				},
				fail: (e) => {
					file.status = 'fail'
					console.error('上传失败:', e)
					uni.showToast({
						title: '文件上传失败',
						icon: 'none'
					})
				}
			})
		},
		removeFile(index) {
			if (this.uploadedFiles && index > -1 && index < this.uploadedFiles.length) {
				const file = this.uploadedFiles[index]
				// 调用插件删除文件
				this.$refs.lsjUploadRef.deleted(file)
				// 从数组中移除
				this.uploadedFiles.splice(index, 1)
				// 重新赋值触发视图更新
				this.uploadedFiles = [...this.uploadedFiles]
			}
		},
		handleConfirmSubmit() {
			if (!this.submitForm.year) {
				uni.showToast({
					title: '请选择监测年份',
					icon: 'none'
				})
				return
			}
			if (!this.submitForm.category) {
				uni.showToast({
					title: '请选择监测类别',
					icon: 'none'
				})
				return
			}

			// 检查是否有文件还在上传中
			const uploadingFiles = this.uploadedFiles.filter(f => f.status === 'progress')
			if (uploadingFiles.length > 0) {
				uni.showToast({
					title: '还有文件正在上传，请稍候',
					icon: 'none'
				})
				return
			}

			// 检查是否有上传失败的文件
			const failedFiles = this.uploadedFiles.filter(f => f.status === 'fail')
			if (failedFiles.length > 0) {
				uni.showToast({
					title: '有文件上传失败，请重新上传',
					icon: 'none'
				})
				return
			}

			uni.showToast({
				title: '任务下发成功',
				icon: 'success'
			})
			this.showSubmitModal = false
		},
		handleSaveDraft() {
			// 保存草稿逻辑
			const draftData = {
				...this.submitForm,
				files: this.uploadedFiles,
				saveTime: new Date().toLocaleString()
			}

			// 这里可以调用API保存草稿，或者保存到本地存储
			console.log('保存草稿:', draftData)

			uni.showToast({
				title: '草稿保存成功',
				icon: 'success'
			})

			// 保存成功后可以选择是否关闭弹窗
			// this.showSubmitModal = false
		},
		handleReset() {
			this.submitForm = {
				year: '',
				category: '',
				level: '省级'
			}
			// 清空上传的文件列表
			this.uploadedFiles = []
			this.$refs.lsjUploadRef.clear()
		},

		// 格式化文件大小
		formatSize(n) {
			if (!n && n !== 0) return ''
			const kb = n / 1024,
				mb = kb / 1024
			return mb >= 1 ? (mb.toFixed(1) + ' MB') : (Math.max(kb, 1).toFixed(0) + ' KB')
		},

		// 获取状态文本
		getStatusText(status) {
			switch (status) {
				case 'progress':
					return '上传中'
				case 'success':
					return '成功'
				case 'fail':
					return '失败'
				default:
					return '待上传'
			}
		},
		submit() {
			uni.showToast({
				title: '检测任务下发',
				icon: 'none'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.mine-navbar-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;

	z-index: 1;
}

.search-filter-box {
	background: #fff;
	margin: 20rpx;
	padding: 30rpx;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.search-row {
	margin-bottom: 30rpx;
}

.filter-row {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	margin-bottom: 30rpx;
}

.filter-item {
	display: flex;
	align-items: center;

	.filter-label {
		width: 160rpx;
		font-size: 28rpx;
		color: #666;
		flex-shrink: 0;
	}

	.date-inputs {
		display: flex;
		align-items: center;
		flex: 1;
		gap: 20rpx;

		.date-input-wrapper {
			position: relative;
			flex: 1;

			.calendar-icon {
				position: absolute;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);
				pointer-events: none;
			}
		}

		.date-separator {
			color: #999;
			font-size: 28rpx;
		}
	}

	.picker-input {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #f8f9fa;
		padding: 20rpx;
		border-radius: 12rpx;
		color: #333;
		font-size: 28rpx;
	}
}

.action-buttons {
	display: flex;
	gap: 20rpx;

	.u-button {
		flex: 1;
	}
}

.task-list {
	padding: 0 20rpx;
}

.task-card {
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.task-header {
	margin-bottom: 20rpx;
}

.task-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.year-level {
	display: flex;
	align-items: center;
	gap: 20rpx;

	.year {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.level {
		background: #e3f2fd;
		color: #1976d2;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
	}
}

.status-tag {
	padding: 8rpx 20rpx;
	border-radius: 20rpx;
	color: #fff;
	font-size: 24rpx;

	&.status-processing {
		background: #9e9e9e;
	}

	&.status-completed {
		background: #4caf50;
	}

	&.status-cancelled {
		background: #f44336;
	}

	&.status-draft {
		background: #8bc34a;
	}
}

.task-content {
	margin-bottom: 20rpx;
}

.info-row {
	display: flex;
	margin-bottom: 16rpx;

	.label {
		width: 160rpx;
		color: #666;
		font-size: 26rpx;
		flex-shrink: 0;
	}

	.value {
		color: #333;
		font-size: 26rpx;
		flex: 1;
	}
}

.task-actions {
	display: flex;
	gap: 16rpx;
	flex-wrap: wrap;
}

.empty-state {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 400rpx;
}

.submit-btn {
	position: fixed;
	bottom: 38rpx;
	left: 30rpx;
	width: 690rpx;
	height: 88rpx;
	background: #0A993B;
	color: #fff;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36rpx;
	font-weight: 600;
	z-index: 100;
}

.submit-modal {
	background: #fff;
	border-radius: 22rpx;
	overflow: hidden;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.modal-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
}

.modal-content {
	padding: 30rpx;
}

.form-item {
	margin-bottom: 30rpx;
}

.form-label {
	display: block;
	font-size: 28rpx;
	color: #666;
	margin-bottom: 16rpx;
}

.form-input {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #f8f9fa;
	padding: 20rpx;
	border-radius: 12rpx;
	color: #333;
	font-size: 28rpx;
}

.template-download {
	margin: 30rpx 0;
	padding: 20rpx;
	background: #f8f9fa;
	border-radius: 12rpx;
}

.download-text {
	font-size: 26rpx;
	color: #666;
}

.download-link {
	font-size: 26rpx;
	color: #007aff;
	text-decoration: underline;
}

.upload-section {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.upload-note {
	font-size: 24rpx;
	color: #999;
}

.file-list {
	margin-top: 20rpx;
}

.file-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16rpx;
	background: #f8f9fa;
	border-radius: 12rpx;
	margin-bottom: 12rpx;
}

.file-info {
	display: flex;
	align-items: center;
	flex: 1;
	gap: 12rpx;
}

.file-name {
	font-size: 26rpx;
	color: #333;
	flex: 1;
}

.file-size {
	font-size: 24rpx;
	color: #999;
}

.file-status {
	margin-right: 16rpx;
}

.status-success {
	font-size: 24rpx;
	color: #4caf50;
}

.status-progress {
	font-size: 24rpx;
	color: #2196f3;
}

.status-fail {
	font-size: 24rpx;
	color: #f44336;
}

.status-pending {
	font-size: 24rpx;
	color: #999;
}

.modal-actions {
	display: flex;
	gap: 20rpx;
	padding: 30rpx;
	border-top: 1rpx solid #f0f0f0;

	.u-button {
		flex: 1;
	}
}
</style>